<template>
  <el-dialog
    :model-value="visible"
    width="700px"
    top="8vh"
    :show-close="true"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    class="expert-reply-dialog"
    destroy-on-close
    @update:modelValue="handleDialogUpdate"
  >
    <template #header>
      <div class="font-bold text-lg">评论回复</div>
    </template>
    <div class="reply-scroll-area" ref="scrollArea">
      <!-- 主评论内容 -->
      <div class="main-comment-area py-3 border-b border-slate-100">
        <div class="flex gap-2 items-start">
          <img :src="comment.avatar" class="w-8 h-8 rounded-full object-cover shadow-sm" />
          <div class="flex-1 min-w-0">
            <div class="flex items-center gap-1 min-h-[28px]">
              <UserHoverCard :user="getUser(comment.author)" small>
                <span class="text-xs text-blue-600 font-medium cursor-pointer hover:underline">{{ comment.author }}</span>
              </UserHoverCard>
              <span v-if="comment.isAuthor" class="text-xs bg-blue-50 text-blue-600 rounded px-1 ml-1">作者</span>
            </div>
            <div class="text-slate-800 text-[15px] leading-relaxed mb-1">{{ comment.content }}</div>
            <div class="flex items-center gap-2 text-xs text-slate-400 mt-1">
              <span>{{ comment.time }}</span>
              <span v-if="comment.region">· {{ comment.region }}</span>
            </div>
          </div>
        </div>
      </div>
      <!-- 回复列表 -->
      <div class="reply-list-area mt-2">
        <div class="font-bold text-lg mb-2 -ml-6">{{ replies.length }} 条回复</div>
        <template v-if="replies.length">
          <div v-for="reply in replies" :key="reply.id" class="reply-child-item flex gap-2 items-start py-2 border-b last:border-b-0 border-slate-100">
            <img :src="reply.avatar" class="w-7 h-7 rounded-full object-cover shadow-sm" />
            <div class="flex-1 min-w-0">
              <div class="flex items-center gap-1 min-h-[24px]">
                <UserHoverCard :user="getUser(reply.author)" small>
                  <span class="text-xs text-blue-600 font-medium cursor-pointer hover:underline">{{ reply.author }}</span>
                </UserHoverCard>
                <template v-if="reply.replyTo">
                  <span class="mx-0.5 flex items-center">
                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="display:inline-block;vertical-align:middle;"><polygon points="4,2 9,6 4,10" fill="#b0b8c9"/></svg>
                  </span>
                  <UserHoverCard :user="getUser(reply.replyTo)" small>
                    <span class="text-xs text-blue-600 font-medium cursor-pointer hover:underline">{{ reply.replyTo }}</span>
                  </UserHoverCard>
                </template>
                <span v-if="reply.isAuthor" class="text-xs bg-blue-50 text-blue-600 rounded px-1 ml-1">作者</span>
              </div>
              <div class="text-slate-800 text-[15px] leading-relaxed mb-1">{{ reply.content }}</div>
              <div class="reply-actions flex gap-4 items-center justify-end mt-1">
                <span class="text-xs text-slate-400 min-w-[80px] mr-auto">{{ reply.time }} · {{ reply.region || '北京' }}</span>
                <span class="cursor-pointer hover:text-blue-500 flex items-center gap-1" @click="$emit('reply', reply)"><el-icon class="icon"><ChatDotRound /></el-icon>回复</span>
                <span class="like-btn cursor-pointer flex items-center gap-1" :class="reply.liked ? 'text-pink-600 font-bold' : 'text-gray-400'" @click="$emit('like', reply)"><svg class="w-4 h-4 icon" fill="currentColor" viewBox="0 0 20 20"><path d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z"/></svg>{{ reply.likeCount || 0 }}</span>
              </div>
            </div>
          </div>
        </template>
        <div v-else class="text-center py-8 text-slate-400">暂无回复内容</div>
      </div>
    </div>
    <template #footer>
      <ExpertCommentInput
        v-model="replyInput"
        :user-avatar="userAvatar"
        :loading="inputLoading"
        @submit="submitReply"
      />
    </template>
  </el-dialog>
</template>
<script setup>
import { ref, watch, nextTick } from 'vue'
import UserHoverCard from './UserHoverCard.vue'
import ExpertCommentInput from './ExpertCommentInput.vue'
const props = defineProps({
  visible: Boolean,
  userAvatar: String,
  comment: Object, // 主评论对象
  replies: Array,  // 主评论的所有回复
})
const emit = defineEmits(['onClose', 'reply', 'like', 'submitReply'])
const replyInput = ref('')
const inputLoading = ref(false)
const scrollArea = ref(null)

function handleDialogUpdate(val) {
  if (!val) emit('onClose')
}

function getUser(name) {
  return {
    name,
    avatar: 'https://randomuser.me/api/portraits/lego/4.jpg',
    desc: '普通用户',
    answer: 0,
    article: 0,
    follower: 0
  }
}

async function submitReply(val) {
  if (!val.trim()) return
  inputLoading.value = true
  await emit('submitReply', val)
  replyInput.value = ''
  inputLoading.value = false
}
</script>
<style scoped>
.expert-reply-dialog .el-dialog {
  border-radius: 1.5rem;
  box-shadow: 0 8px 40px 0 rgba(56,112,255,0.18);
}
.expert-reply-dialog .el-dialog__header {
  position: sticky;
  top: 0;
  background: #fafdff;
  z-index: 2;
  border-radius: 1.5rem 1.5rem 0 0;
}
.reply-scroll-area {
  max-height: 60vh;
  min-height: 200px;
  overflow-y: auto;
  background: #fafdff;
  border-radius: 0 0 1.5rem 1.5rem;
  padding: 0 24px 24px 24px;
}
.main-comment-area {
  background: #fff;
}
.reply-list-area {
  background: #fafdff;
}
.reply-child-item {
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid #e5eaf3;
  padding-bottom: 8px;
  margin-bottom: 2px;
}
.reply-child-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}
.reply-actions {
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 14px;
  color: #8a99b3;
  margin-top: 2px;
}
.reply-actions .icon {
  font-size: 15px;
  margin-right: 2px;
}
.reply-actions .like-btn {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 19px;
}
</style> 